﻿@page "/content/image"

<Pager Title="Image" Description="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them"
 Indicates="@(new[]{"Example","Responsive images","Image thumbnails"})">
 	<Demo Title="Example">
		<Description>
			Use <code>Image</code> component instead of <code>img</code> element as same attributes.
		</Description>
		<Run>
			<Image Src="/img/demo-bg-img.jfif" width="30%"/>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Image Src=""...""/>
```
			")
		</Code>
	</Demo>
	 	<Demo Title="Responsive images">
		<Description>
			Images are made responsive with <code>Fluid</code> This applies <code>max-width: 100%</code>; and <code>height: auto</code>; to the image so that it scales with the parent element.
		</Description>
		<Run>
			<Image Src="/img/demo-bg-img.jfif" Fluid/>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Image Src=""..."" Fluid/>
```
			")
		</Code>
	</Demo>
		 	<Demo Title="Image thumbnails">
		<Description>
			you can use <code>Thumbnail</code> to give an image a rounded 1px border appearance.
		</Description>
		<Run>
			<Image Src="/img/demo-bg-img.jfif" Thumbnail width="200px" height="200px"/>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Image Src=""..."" Thumbnail/>
```
			")
		</Code>
	</Demo>
</Pager>